<template>

  <SystemTable ref="sysTable" v-model="drawer"
               @sys-update="updateData"
               @sys-batch-delete="batchDeleteSys"
               @sys-add="data.unshift($event)"/>

  <Table border :columns="columns" :data="data" @on-selection-change="checkedData = $event">
    <template #name="{ row }">
      <strong>{{ row.sysName }}</strong>
    </template>
    <template #action="{ row, index }">

      <Button v-auth:sys:bind:menu type="success" icon="md-walk" size="small" style="margin-right: 5px" @click="applyMenu(row)">
        绑定菜单
      </Button>

      <Button v-auth:sys:update type="primary" size="small" style="margin-right: 5px" icon="ios-create-outline"
              @click="editSys(row)">修改
      </Button>
      <Button v-auth:sys:delete type="error" size="small" @click="remove(row.id, index)" icon="ios-remove-circle-outline">删除</Button>
    </template>

    <template #state="{ row, index }">
      <DotTag type="primary" v-if="row.state">正常</DotTag>
      <DotTag type="error" v-else>失效</DotTag>
    </template>
  </Table>
  
  
  <BindMenu :sys-id="bind.sysId" v-model="bind.state" />
</template>

<script>
import SystemTable from '../components/sys/SystemTable.vue' ;
import BindMenu from "../components/sys/BindMenu.vue";
import DotTag from '../components/DotTag.vue'

export default {
  components: {
    DotTag,
    SystemTable,
    BindMenu
  },
  data() {
    return {
      checkedData: [], // 存放 复选框选中的所有数据
      drawer: {
        state: false,
        title: "",
        row: {},
      },
      bind: {
         sysId: -1,
         state: false,
      },
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: '系统名',
          slot: 'name',
          width: 220,
        },
        {
          title: '系统标识',
          key: 'remark',
          width: 150,
        },
        {
          title: '系统描述',
          key: 'description'
        },
        {
          title: '首页路由地址',
          key: 'url',
          width: 150,
        },
        {
          title: '启用状态',
          slot: 'state',
          width: 100,
        },
        {
          title: '操作',
          slot: 'action',
          width: 270,
          align: 'center'
        }
      ],
      data: []
    }
  },
  created() {
    this.queryAllSys();
  },
  methods: {
    batchDeleteSys() {
      if (this.checkedData.length == 0) {
        this.$tips.warning("请至少选中一个要删除的系统");
      } else {
        // 负责删除多个系统
        this.$tips.confirm(("您确定要删除选中的所有系统吗？")).then(() => {
          // 将所有的ID 获取到
          let ids = this.checkedData.map(row => row.id);
          this.$api.batchDelSys(...ids).then(ret => {
            if (ret.data.status) {
              this.$tips.info("删除成功")
              for (let id of ids) {
                let index = this.data.findIndex(row => row.id === id);
                this.data.splice(index, 1);
              }
            }
          })
        })
      }
    },
    queryAllSys() {
      this.$api.queryAllSys().then(ret => {
        if (ret.data.status) {
          this.data = ret.data.list;
        }
      })
    },
    applyMenu(row) {
      // 绑定菜单
      this.bind.state = true ;
      this.bind.sysId = row.id ;
    },
    editSys(row) {
      // 重置 子组件的错误信息
      this.$refs.sysTable.resetError();
      // 1. 将抽屉 打开
      this.drawer.state = true;
      // 修改标题
      this.drawer.title = "修改系统"
      // 2. 将要修改的数据 传给 子组件
      this.drawer.row = {...row};
    },
    updateData(row) {
      // 根据 ID 找到 要修改的数据
      let index = this.data.findIndex(sys => sys.id === row.id);
      this.data.splice(index, 1, row);
    },
    remove(id, index) {
      this.$Modal.confirm({
        title: '提示框',
        content: '您确定要删除该系统吗？',
        onOk: () => {
          // 发送异步请i去
          this.$api.delSys(id).then(ret => {
            if (ret.data.status) {
              //
              this.$Message.info({
                background: true,
                content: "删除成功"
              })
              // 删除页面中对应的数据
              this.data.splice(index, 1);
            }
          })
        }
      });
    }
  }
}
</script>

<style scoped>

</style>